<script lang="ts">
import {defineComponent, PropType, ref, Ref, UnwrapRef} from "vue"
import {ResourceLibraryType} from "@/components/ResourceLibrary/config";
import {getResourcesCateListApi, moveCateApi} from "@/api/resources";
import {useCloseMessageBox} from "@/hooks/DialogMsg";

export default defineComponent({
  name: "MoveCate",
  emits: {
    success: (id: number[], cate_id: number) => true
  },
  props: {
    type: {
      type: String as PropType<ResourceLibraryType>,
      required: true
    },
    id: {//要移动的文件ID
      type: Array as PropType<Array<number>>,
      required: true
    }
  },
  setup(props, {emit}) {
    const cate_id = ref('0')


    const cate: Ref<UnwrapRef<any[]>> = ref([])
    getResourcesCateListApi({type: props.type}).then(result => {
      if (result.code === 200) {
        cate.value = result.data
      }
    })

    const close = useCloseMessageBox()

    /**
     * 移动资源
     */
    function MoveResources() {
      const FormData = {id: props.id, cate_id: parseInt(cate_id.value)}
      moveCateApi(FormData).then(result => {
        if (result.code === 200) {
          emit('success', FormData.id, FormData.cate_id)
          close()
        }
      })
    }


    return {
      cate,
      cate_id,
      MoveResources
    }
  }
})
</script>

<template>
  <el-form size="large" class="app-margin-top-interval">
    <el-form-item>
      <el-select v-model="cate_id" placeholder="移动到">
        <el-option value="0" label="默认分类"/>
        <el-option v-for="item in cate" :key="item.id" :value="item.id" :label="item.name"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="MoveResources" type="primary" class="app-width-full">
        移动
      </el-button>
    </el-form-item>
  </el-form>
</template>